<template>
	<view class="addAddress">
		<form @submit="save">
			<view class="baseW">
				<view class="u-f-jsb u-f-ac set-li">
					<text>收货地址</text>
					<view class="u-f-jse" @click.stop="addrmap">
						<view>广东省广州市白云区</view>
						<view class="icon iconfont icon-right"></view>
					</view>
				</view>
				<view class="u-f u-f-ac set-li">
					<text>收货人</text>
					<input type="text" placeholder="请输入收货人名称" maxlength="25" name="receiverName" placeholder-style="color:#ccc">
				</view>
				<view class="u-f u-f-ac set-li">
					<text>手机号码</text>
					<input type="number" placeholder="请输入您的手机号码"  maxlength="11" name="receivePhone" placeholder-style="color:#ccc">
				</view>
				
			</view>
			<view class="baseW">
				<view class="u-f-jsb u-f-ac set-li address-detail">
					<text>详细地址</text>
					<textarea placeholder="如街道、门牌号、小区、楼栋号、单元、室等" name="streetAddr" placeholder-style="color:#ccc"></textarea>
				</view>
			</view>
			<view class="baseW">
				<view class="u-f-jsb u-f-ac set-li">
					<view>设置为默认地址</view>
					<switch :checked="isDefault" color="#F22222"></switch>
				</view>			
			</view>
			<view class="baseW">
				<view class="text-red set-li">删除收货地址</view>
			</view>
			<tui-button :formType="'submit'" class="btn-fixed" width="650rpx" type="danger" :shadow="true" shape="circle" :size="30">确定</tui-button>
			<tui-modal :show="modalshow" @cancel='handlecancel' @click='modalclick' :content="'确认要删除该收货地址吗？'"></tui-modal>
		</form>
	</view>
</template>
<script>
export default {
	data() {
		return {
			address:'',
			isDefault: false,    //是否为默认地址
			modalshow: false
		};
	},
	methods:{
		save(e){
			console.log(e,'--------')
		},
		addrmap(){
			let that = this
			uni.showModal({
				title: '请求授权当前位置',
				content: '需要获取您的地理位置，请确认授权',
				success: (res) => {
					if (res.confirm) {
						// 获取地址接口
						uni.chooseLocation({
							type: 'wgs84',
							geocode: true,
							success: function(res) {
								console.log(res)
								that.address = res.address
							}
						});
			
					} else if (res.cancel) {
						uni.showToast({
							title: '你拒绝了授权，无法获得周边信息',
							icon: 'none',
							duration: 1000
						})
					}
				}
			});
		},
	}
}
</script>

<style scoped lang="scss">
.addAddress {
	padding-top: 20rpx;
}
.baseW {
	padding: 0;
}
.address-detail {
	align-items: flex-start;
}
.tui-header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	box-sizing: border-box;
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	overflow: hidden;
	position: relative;
}
.tui-icon-close {
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
}
</style>
